<template>
	<section class="client-home-wrapper">
		<header>
			<section class="top-title">
				<section class="title-wrapper">
					<h2>人才落户申请系统</h2>
					<p>禁止传输、存储、处理涉密文件和信息。</p>
				</section>
				<section class="user-info" style="cursor: pointer;display: flex;align-items: center;" @click="onHandleCommandClick">
					<span class="el-dropdown-link white-color">退出</span>
					<el-icon class="el-icon--right">
						<svg t="1750661757323" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1628" width="16" height="16"><path d="M511.991851 1023.982934c-282.320581 0-511.991381-229.679334-511.991382-511.991382 0-282.277915 229.670801-511.991381 511.991382-511.991381a510.813801 510.813801 0 0 1 344.271538 133.032427 42.640349 42.640349 0 0 1 2.901284 60.244319c-15.829067 17.493039-42.793946 18.730351-60.286985 2.901285A425.840298 425.840298 0 0 0 511.991851 85.332068c-235.26004 0-426.659485 191.399445-426.659485 426.659484 0 235.302706 191.399445 426.659485 426.659485 426.659485 105.982216 0 207.569839-39.082009 286.032518-110.078147a42.606216 42.606216 0 0 1 60.244319 2.986616 42.640349 42.640349 0 0 1-2.986616 60.244319c-94.163748 85.246565-216.103029 132.179108-343.290221 132.179109" fill="#ffffff" p-id="1629"></path><path d="M885.975955 552.447404H341.328057c-23.466272 0-42.665948-19.199677-42.665948-42.665948s19.199677-42.665948 42.665948-42.665948h544.647898L792.989787 371.449918a42.77688 42.77688 0 0 1 0-60.329651 42.77688 42.77688 0 0 1 60.329651 0l158.205337 162.770593a42.58915 42.58915 0 0 1 12.356059 32.946646 42.77688 42.77688 0 0 1 0 5.879367 42.58915 42.58915 0 0 1-12.356059 32.955179L853.319438 708.442645a42.77688 42.77688 0 0 1-60.329651 0 42.77688 42.77688 0 0 1 0-60.329651l92.986168-95.674123z" fill="#ffffff" p-id="1630"></path></svg>
					</el-icon>
				</section>
			</section>
		</header>
		<RouterView />
	</section>
</template>

<script setup lang="ts">
import { NextLoading } from '/@/utils/loading';
import { onMounted } from 'vue'
import { customLoginApi } from '/@/api/login';
import { Session } from '/@/utils/storage';
import { useI18n } from 'vue-i18n';
import { ElMessageBox, ElMessage, ClickOutside as vClickOutside } from 'element-plus';
import { useRouter } from 'vue-router';
import { useUserInfo } from '/@/stores/userInfo';
import { storeToRefs } from 'pinia';
const { locale, t } = useI18n();
const stores = useUserInfo(); 
const { userInfos } = storeToRefs(stores);

const loginApi = customLoginApi();
const router = useRouter();
onMounted(() => {
	NextLoading.done()
	console.log(Session.get('maple-manage-web:userInfo'));
	
})

const onHandleCommandClick = (path: string) => { 
	ElMessageBox({
		closeOnClickModal: false,
		closeOnPressEscape: false,
		title: t('message.user.logOutTitle'),
		message: t('message.user.logOutMessage'),
		showCancelButton: true,
		confirmButtonText: t('message.user.logOutConfirm'),
		cancelButtonText: t('message.user.logOutCancel'),
		buttonSize: 'default',
		beforeClose: (action, instance, done) => {
			if (action === 'confirm') {
				instance.confirmButtonLoading = true;
				instance.confirmButtonText = t('message.user.logOutExit');
				setTimeout(() => {
					done();
					setTimeout(() => {
						instance.confirmButtonLoading = false;
					}, 300);
				}, 700);
			} else {
				done();
			}
		},
	})
	.then(async () => {
		// 清除缓存/token等
		Session.clear();
		// 使用 reload 时，不需要调用 resetRoute() 重置路由
		// window.location.reload();
		router.replace('/customeLogin');
	})
	.catch(() => {}); 
};
</script>

<style lang="scss">
.client-home-wrapper {
	height: 100vh;
	overflow-y: auto;
	background-image: url("/@/assets/page-bj.png");
	background-position: left top;
	background-size: 100% 60%;
	background-repeat: no-repeat;
}

.primary-color {
	color: #409EFF;
}
.white-color {
	color: #ffffff;
}

.c-pointer {
	cursor: pointer;
}

.custome-body-style {
	background: #f7f9fc !important;
}

.top-title{ 
	height: 50px;
	background-color: #ee2b2b;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
}
.top-title section{
	text-align: center;
}
.top-title h2{
	font-size: 22px; 
	color: #ffffff;
	margin-right: 20px;
}
.title-wrapper{
	display: flex;
	align-items: center;
	color: #fdde51;
	
}
 

@for $i from 1 through 100 {
	.ml-#{$i} {
		margin-left: 1px * $i;
	}
}

@for $i from 1 through 100 {
	.mr-#{$i} {
		margin-right: 1px * $i;
	}
}

@for $i from 1 through 100 {
	.mt-#{$i} {
		margin-top: 1px * $i;
	}
}

@for $i from 1 through 100 {
	.mb-#{$i} {
		margin-bottom: 1px * $i;
	}
}
</style>